<script setup name="image">
import { ref } from 'vue'
import ImageAside from '@/components/ImageAside.vue'
import ImageMain from '@/components/ImageMain.vue'

// 获取浏览器可视高度 或 Body 的可视高度
const windowHeight = ref(window.innerHeight || document.body.clientHeight)
// 减去头部高度、标签高度、内边距高度
const h = windowHeight.value - 64 - 44 - 40
// 左侧列表节点
const ImageAsideRef = ref(null)
// 新增点击事件
const handleOpenCreate = () => ImageAsideRef.value.CreateDialog()
// 图库内容节点
const ImageMainRef = ref(null)

// 获取当选选中图片分类id
const handleAsideChange = id => ImageMainRef.value.loadData(id)
// 显示对话框
const handleOpenUpload = () => ImageMainRef.value.openUploadFile()
</script>

<template>
  <el-container class="image-container" :style="{ height: `${h}px` }">
    <el-header class="image-container-header">
      <el-button type="primary" size="small" @click="handleOpenCreate">
        <el-icon color="#fff"><Plus /></el-icon>
        <span>新增图片分类</span>
      </el-button>
      <el-button type="warning" size="small" @click="handleOpenUpload">
        <el-icon color="#fff"><Upload /></el-icon>
        <span>上传图片</span>
      </el-button>
    </el-header>
    <el-container>
      <ImageAside ref="ImageAsideRef" @change="handleAsideChange" />
      <ImageMain ref="ImageMainRef" />
    </el-container>
  </el-container>
</template>

<style lang="scss" scoped>
.image-container {
  background: var(--white);
  border-radius: 4px;
  &-header {
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
  }
}
@media screen and (max-width: 375px), screen and (max-width: 414px) {
  :deep(.el-dialog--center) {
    min-width: 70% !important;
    max-width: 70% !important;
  }
}
</style>
